<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery基本用法</title>
		<script src="../jQuery/jquery-3.7.1.js"></script>
		<script>
			console.log(typeof $)
			// $(selector).action()
			// 通过选择器
			// 获取的对象结构跟DOM对象不一样
			//$('p')等同于document.getElementsByTagName('p')
			$(document).ready(function() {
				// let obj = $('p')
				// obj.text('123')
				// obj.css('color', 'red')
				$('p').text('123').css('color', 'red')
				$('.div1').html("<a href=''>超链接</a>")
				// 匹配class等于div1的第一个元素
				$('.div1').eq(0).html('<p>123</p>')
				// 匹配class等于div1的最后一个元素
				$('.div1:last').css('font-size', '36px')
				// 为第一个button增加事件
				$('button:first').click(function() {
					alert('button被点击了')
				}).addClass('abc').attr('id', 'def')
				console.log($('p').text())
			})
		</script>
	</head>
	<body>
		<p>jQuery获取p标签对象</p>
		<div class="div1">123</div>
		<div class="div1">456</div>
		<h3 class="div1">
			<a href="">超链接1</a>
		</h3>
		<button>按钮</button>
	</body>
</html>